// 重置样式
@import './reset.scss';
// 常量
@import './constant.scss';

#snakes-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: $globalFont;
  background-image: $globalBgc;

  // 淡入动画
  .ani-fade-in {
    @keyframes fade-in {
      0% {
        opacity: 0;
        transform: scale(0.8);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    animation: fade-in .3s;
  }

  .ani-fade-out {
    @keyframes fade-out {
      0% {
        opacity: 1;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(0.8);
      }
    }

    animation: fade-out .3s forwards;
  }

  // 主内容
  #main {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: $mainAreaWidth;
    height: $mainAreaHeight;
    border-top: $main-border-top-bot solid $main-border-color;
    border-bottom: $main-border-top-bot solid $main-border-color;
    border-left: $main-border-left-right solid $main-border-color;
    border-right: $main-border-left-right solid $main-border-color;
    border-radius: $main-border-radius;
    background: $mainBgc;


    // 顶部区域
    .main-top-contianer {
      flex-shrink: 5;
      flex-grow: 5;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: $moveAreaWidth;

      // 模式选择
      .radio-input {
        background-color: #fff;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
        min-width: 25%;
        margin-right: 1.5vw;
        box-shadow: inset 0 0 3px #000000de;
        transition: all 1s;

        input[type=radio] {
          display: none;
        }

        input[type=radio]+label {
          flex-grow: .25;
          flex-shrink: .25;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #333;

        }

        input[type=radio]+label span {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80%;
          height: 80%;
          margin: -1px 4px 0 0;
          vertical-align: middle;
          cursor: pointer;
          border-radius: 50%;
          box-shadow: 0 0 3px;
          border: 2px solid #FFFFFF;
          background-repeat: no-repeat;
          background-position: center;
        }

        input[type=radio]+label span svg {
          opacity: 0;
          transition: all 0.3s ease;
        }

        input[type=radio]#color-1+label span {
          background-color: #2ecc71;
        }

        input[type=radio]#color-2+label span {
          background-color: #3498db;
        }

        input[type=radio]#color-3+label span {
          background-color: #f10f0f;
        }

        input[type=radio]:checked+label span svg {
          opacity: 1;
        }

        &:has(input[type=radio]#color-1:checked) {
          background-color: #2ecc71;
        }

        &:has(input[type=radio]#color-2:checked) {
          background-color: #3498db;
        }

        &:has(input[type=radio]#color-3:checked) {
          background-color: #f10f0f;
        }
      }

      // 记分牌
      .scoreboard {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 70%;
        height: 60%;
        background: rgb(235 158 64 / 61%);
        overflow: hidden;
        border-radius: 20px;
        box-shadow: inset 0 0 3px #000000de;

        .content {
          display: flex;
          position: relative;
          z-index: 9999;
          justify-content: space-around;
          align-items: center;
          width: 90%;
          color: rgb(0, 0, 0);
          text-align: center;
        }

        .progress {
          position: absolute;
          z-index: 1;
          width: 103%;
          height: 100%;
          box-shadow: inset 0 0 3px #000000de;
          background-color: #FA8BFF;
          background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);

        }
      }
    }

    // 移动区域
    .move-areangArea {
      position: relative;
      width: $moveAreaWidth;
      height: $moveAreaHeight;
      overflow: hidden;
      background-color: $moveBgc;
      box-shadow: 0 0 2px $move-box-shadow-color;

      // 蛇
      #snake {
        .item {
          position: absolute;
          width: $snakeWidth;
          height: $snakeHeight;
          // background-color: black;
        }
      }

      // 食物
      #food {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        width: $foodWidth;
        height: $foodHeight;

        .item {
          transform: rotate(45deg);
          width: calc($foodWidth / 2);
          height: calc($foodHeight / 2);
          background-color: black;
        }
      }
    }


    // 按钮区域
    .btn-container {
      flex-shrink: 5;
      flex-grow: 5;
      height: 10vh;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        @keyframes gradient_301 {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        }

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 13rem;
        height: 3rem;
        background-size: 300% 300%;
        backdrop-filter: blur(1rem);
        border-radius: 5rem;
        transition: 0.5s;
        animation: gradient_301 5s ease infinite;
        border: double 4px transparent;
        background-image: linear-gradient(#212121, #212121),
        linear-gradient(137.48deg,
          #ffdb3b 10%,
          #fe53bb 45%,
          #8f51ea 67%,
          #0044ff 87%);
        background-origin: border-box;
        background-clip: content-box,
        border-box;

        &:hover {
          transform: scale(.95);
        }

        #container-stars {
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          overflow: hidden;
          transition: 0.5s;
          backdrop-filter: blur(1rem);
          border-radius: 5rem;

          #stars {
            position: relative;
            background: transparent;
            width: 200rem;
            height: 200rem;

            @keyframes animStar {
              from {
                transform: translateY(0);
              }

              to {
                transform: translateY(-135rem);
              }
            }


            @keyframes animStarRotate {
              from {
                transform: rotate(360deg);
              }

              to {
                transform: rotate(0);
              }
            }


            &::after {
              content: '';
              position: absolute;
              top: -10rem;
              left: -100rem;
              width: 100%;
              height: 100%;
              animation: animStarRotate 90s linear infinite;
            }

            &::after {
              background-image: radial-gradient(#ffffff 1px, transparent 1%);
              background-size: 50px 50px;
            }

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -50%;
              width: 170%;
              height: 500%;
              animation: animStar 60s linear infinite;
            }

            &::before {
              background-image: radial-gradient(#ffffff 1px, transparent 1%);
              background-size: 50px 50px;
              opacity: 0.5;
            }
          }
        }

        strong {
          z-index: 2;
          font-family: 'Avalors Personal Use';
          font-size: 12px;
          letter-spacing: 5px;
          color: #ffffff;
          text-shadow: 0 0 4px white;
        }

        #glow {
          position: absolute;
          display: flex;
          width: 12rem;

          .circle {
            @keyframes pulse_3011 {
              0% {
                transform: scale(0.75);
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
              }

              70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
              }

              100% {
                transform: scale(0.75);
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
              }
            }

            width: 100%;
            height: 30px;
            filter: blur(2rem);
            animation: pulse_3011 4s infinite;
            z-index: -1;

            &:nth-of-type(1) {
              background: rgba(254, 83, 186, 0.636);
            }

            &:nth-of-type(2) {
              background: rgba(142, 81, 234, 0.704);
            }

            &:hover #container-stars {
              z-index: 1;
              background-color: #212121;
            }

            &:hover {
              transform: scale(1.1);
            }

            &:active {
              border: double 4px #fe53bb;
              background-origin: border-box;
              background-clip: content-box, border-box;
              animation: none;
            }

            &:active .circle {
              background: #fe53bb;
            }
          }
        }

      }
    }
  }

  //对话框
  #dialog {
    position: fixed;
    z-index: 9999;
    // display: flex;
    display: 'none';
    flex-direction: column;
    align-items: center;
    justify-content: right;
    width: 252px;
    height: 265px;
    background: #79abffe0;
    border-radius: 30px;
    box-shadow: 5px 5px 5px 1px #00000045;

    .img {
      display: flex;
      flex-direction: column;
      align-content: space-between;
      justify-content: center;
      flex-grow: 8;
      width: 100%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      background: linear-gradient(#e66465, #9198e5);

      #dialog-title {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 2;
        font-size: larger;
        font-weight: bold;
        text-align: center;
      }

      #dialog-info {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 8;
        font-size: medium;
        text-align: center;

      }

    }

    .btn-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 2;
      width: 100%;

      #dialog-confirm {
        width: 70%;
        height: 70%;
        border: 1px solid #a0aaddb5;
        border-radius: 10px;
        box-shadow: inset 0px 0px 5px rgb(167 197 238);
        background-color: #7584e6;
        font-size: large;
        font-family: $globalFont;
        transition: all .3s;

        &:hover {
          transform: scale(.95);
        }
      }
    }
  }

  // 版权
  .copyright {
    margin-top: 10px;
    color: gainsboro;
    font-size: small;
  }


  // 按钮提醒
  .btn-info {
    font-size: xx-small;
    color: #80a8ad;

  }
}